<!-- 使用模板必看:
    uploaddialog.changeopen(模板名称,表示上传位置, 对话框标题)就可以调用模板.
 -->
<script setup lang='ts'>
import { uploadStore } from '../../stores/uploadDialog';
import { UploadFilled } from '@element-plus/icons-vue'
import settingAPI from '@/setting/setting'
import { ElMessage } from 'element-plus'

const uploaddialog = uploadStore()
const dowloadModel = () => {
    try {
        let url = settingAPI.BACK_URL + `media/model/${uploaddialog.downloadName}.xlsx`
        let elementIftrame = document.createElement('iframe')
        elementIftrame.src = url
        elementIftrame.style.display = 'none'
        document.body.appendChild(elementIftrame)
    } catch (error) {
        ElMessage.error('模板下载失败！')
    }
}

const importData = (file: any) => {
    // 文件在axiox中一般封装在formdata类中
    // 1.定义formData类
    let fileReq = new FormData()
    // 2.把文件装在formData的容器中
    fileReq.append('file', file.file)
    // 请求
    try {
        uploaddialog.importData(fileReq)
        uploaddialog.closeDialog()
    } catch (error) {
        ElMessage.error('导入数据失败！')
        uploaddialog.closeDialog()
    }
}
</script>
<template>
    <!-- 导入对话框 -->
    {{ uploaddialog.dialogName }}
    <el-dialog v-model="uploaddialog.isopendialog" drag :title=uploaddialog.dialogName width="500" center>
        <span>
            <div class="setmodel">
                <el-button @click="dowloadModel">模块下载</el-button>
            </div>
            <div>
                <el-upload class="upload-demo" drag :http-request='importData'>
                    <el-icon class="el-icon--upload"><upload-filled /></el-icon>
                    <div class="el-upload__text">
                        <em>将文件拖到此处将自动上传！</em>
                    </div>
                    <template #tip>
                        <div class="el-upload__tip">
                            只能上传EXCEL文件
                        </div>
                    </template>
                </el-upload>
            </div>
        </span>
    </el-dialog>
</template>
<style scoped>
.setmodel {
    height: 50px;
    border: 1px dashed #67c23a;
    border-radius: 10px;
    margin-bottom: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}
</style>